<template>
	<div class="SGgoodsselect ">
		<div class="my-app">
			<h2 class="my-h2">商品管理 / 添加产品</h2>
			<div class="main" v-if="res_productList===true">
				暂无数据
			</div>
			<div class="main" v-if="res_productList!=true">
				<div class="my-form-item bottom">

					<div class="top">
						<div class="selop">
							<span>按产品名称查询：</span>
							<el-select v-model="value" placeholder="请选择" @change="selgoods_name">
								<el-option v-for="(item, key, index) in options" :key="item.goods_name" :label="item.goods_name" :value="item.goods_name">
								</el-option>
							</el-select>
						</div>
						<div class="selop">
							<span>按活动日期查询：</span>
							<div class="block">

								<el-date-picker value-format="yyyy-MM-dd" v-model="time" @change="timepicker(time)" type="date" placeholder="选择日期">
								</el-date-picker>
							</div>
						</div>
					</div>


				</div>
				<div class="bordertab">

					<div class="tab">
						<div class="li" v-for="(item, key, index) in tablist" :key="item.id" :class="{active:isactive===item.id}" @click="tabactive(item.id)">
							{{item.name}}
						</div>
					</div>
				</div>
				<div class="bottom ">
					<div class="goodsellist" v-show="page.total==0">
						<p>
							暂无数据
						</p>
					</div>
					<div class="goodsellist" v-show="page.total!=0">
						<div class="row" v-for="(item, key, index) in res_productList.result.data">
							<div class="ul">
								<div class="lileft">

									<div class="li ">
										<label>序号：</label>
										<span>{{item.id}}</span>
									</div>
									<div class="li ">
										<label>门市价：</label>
										<span>{{item.listing_price}}</span>
									</div>
									<div class="li ">
										<label>上架状态：</label>
										<span v-if="item.status===1" class="color00ccff">上架</span>
										<span v-if="item.status===2" class="colorff6600">未上架</span>
									</div>
								</div>
								<div class="liright">
									<div class="goodsedit" @click="productListEdit(item.id)">
										编辑
									</div>
								</div>
							</div>
							<div class="ul">
								<div class="lileft">
									<div class="li ">
										<label v-show="UserInfo_data.type===1">票种：</label>
										<label v-show="UserInfo_data.type===2">房型：</label>
										<span>{{item.type}}</span>
									</div>
									<div class="li ">
										<label>会员价：</label>
										<span>{{item.membership_price}}</span>
									</div>
									<div class="li ">
										<label>审核状态：</label>
										<span v-if="item.audit_status===1" class="color00ccff">审核通过</span>
										<span v-if="item.audit_status===2" class="colorff6600">未审核</span>
										<span v-if="item.audit_status===3" class="colorff6600">{{item.reason}}</span>
									</div>
								</div>
								<div class="liright">
									<div class="goodsdel" @click="delproductListDelete(item.id)">删除</div>

								</div>
							</div>
							<div class="ul">
								<div class="lileft">

									<div class="li ">
										<label>产品名称：</label>
										<span>{{item.goods_name}}</span>
									</div>
									<div class="li ">
										<label>结算价：</label>
										<span>{{item.settlement_price}}</span>
									</div>
									<div class="li " v-show="item.start_time!=''">
										<label>活动时间：</label>
										<span>
											<font>{{item.start_time}}</font>至
											<font>{{item.end_time}}</font>
										</span>
									</div>
									<div class="li " v-show="item.start_time==''">

									</div>
								</div>
								<div class="liright">
									<div class="goodsDownup" v-if="item.status===1" @click="goodsDown(item.id)">下架</div>
									<div class="goodsDownup" v-if="item.status===2" @click="goodsup(item.id)">上架</div>
								</div>
							</div>
						</div>
					</div>
					<page v-show="page.total!=0" :page="pageList"></page>
				</div>
			</div>

		</div>
	</div>

</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				deldialog: {
					centerDialogVisible: false,
					text: "确定要删除这条记录吗？"
				},
				time: "",
				NavName: "商品管理  /  查询产品",
				isactive: 1,
				tablist: [{
					id: 1,
					name: "全部",
				}, {
					id: 2,
					name: "已上架",
				}, {
					id: 3,
					name: "未上架",
				}, {
					id: 4,
					name: "审核中",
				}, {
					id: 5,
					name: "审核通过",
				}, ],
				options: [],
				value: '',
				reqList: {
					token: "", // String header传入
					status: "", // Number 1 上架, 2 下架 允许值: 1, 2
					price_type: "", //Number 1 默认价格 允许值: 1, 2
					audit_status: "", // Number 1 通过审核, 2 未通过审核 允许值: 1, 2
					time: "", //String 活动时间查询
					goods_name: "", //String 商品名称查询
					page: 1, //String 分页传参页码
				},
				pageList: {

				},
				del: {
					token: "", // String header传入
					id: "", // Int 对应产品ID
					type: "", // Int 商品分类， 1 景区2酒店
				}
			}
		},
		computed: {
			...mapGetters([
				'token',
				'UserInfo_data',
				'productList',
				'res_productList',
				'page'
			])
		},

		beforeRouteLeave(to, from, next) {
			this.getproductList({
				token: "", // String header传入
				status: "", // Number 1 上架, 2 下架 允许值: 1, 2
				price_type: "", //Number 1 默认价格 允许值: 1, 2
				audit_status: "", // Number 1 通过审核, 2 未通过审核 允许值: 1, 2
				time: "", //String 活动时间查询
				goods_name: "", //String 商品名称查询
				page: 1, //String 分页传参页码

			}, )
			next();
		},
		created() {
			this.setproductList();
		},
		mounted() {
			// this.setproductList();
		},
		methods: {
			...mapActions({
				getproductList: "getproductList",
				setRes_productList: 'setRes_productList',
				getpage: "getpage",
				getedit_productList: "getedit_productList",
				getSidebarNavIndex: "getSidebarNavIndex",
			}),
			// 分页
			getpagelist(res) {
				this.reqList.page = res;
				this.getproductList(this.reqList)
				this.setproductList();
			},
			// 查询
			setproductList() {
				let req_productList = JSON.parse(JSON.stringify(this.productList)); //this.templateData是父组件传递的对象
				req_productList.token = this.token;
				this.getproductList(req_productList)
				this.$api.GetproductList(this.productList)
					.then(res => {
						if (res.code === 200) {
							this.setRes_productList(res);
							this.pageList = {
								total: this.res_productList.result.total, // String 总共数据条数
								per_page: this.res_productList.result.per_page, // String 每页数据条数
								current_page: this.res_productList.result.current_page, // String 当前第几页
								last_page: this.res_productList.result.last_page, // String 最后一页
							}

							this.options = this.res_productList.goods;

						}
						if (res.code === 300) {
							this.setRes_productList(true)
						}
					})
			},
			selgoods_name(res) {
				this.reqList.goods_name = res;
				this.time = '';
				this.reqList.time = "";
				this.reqList.status = "";
				this.reqList.audit_status = "";
				this.reqList.page = 1;
				this.isactive = 1;
				this.getproductList(this.reqList)
				this.setproductList();
			},
			timepicker(res) {
				this.reqList.goods_name = "";
				this.reqList.time = res;
				this.reqList.page = 1;
				this.getproductList(this.reqList)
				this.setproductList();
			},
			tabactive(res) {
				this.reqList.page = 1;
				this.value = '';
				this.time = '';
				if (res === 1) {
					this.reqList.goods_name = "";
					this.reqList.time = "";
					this.reqList.status = "";
					this.reqList.audit_status = "";
					this.getproductList(this.reqList)
					this.setproductList();
				}
				if (res === 2) {
					this.reqList.goods_name = "";
					this.reqList.time = "";
					this.reqList.status = 1
					this.reqList.audit_status = "";
					this.getproductList(this.reqList)
					this.setproductList();
				}
				if (res === 3) {
					this.reqList.goods_name = "";
					this.reqList.time = "";
					this.reqList.status = 2
					this.reqList.audit_status = "";
					this.getproductList(this.reqList)
					this.setproductList();
				}
				if (res === 4) {
					this.reqList.goods_name = "";
					this.reqList.time = "";
					this.reqList.status = "";
					this.reqList.audit_status = 2
					this.getproductList(this.reqList)
					this.setproductList();
				}
				if (res === 5) {
					this.reqList.goods_name = "";
					this.reqList.time = "";
					this.reqList.status = "";
					this.reqList.audit_status = 1
					this.getproductList(this.reqList)
					this.setproductList();
				}
				this.isactive = res;
			},
			getpageactive(res) {
				this.ispageactive = res;
			},
			delopdialog(id, res) {
				if (res === 1) {
					this.deldialog.text = "确定要删除这条记录吗？"
					this.del.id = id;
					this.del.type = this.UserInfo_data.type;
				}
				if (res === 2) {
					this.deldialog.text = "是否下架该产品，下架后客户手机端将看到此产品的信息！"
				}
				this.deldialog.centerDialogVisible = true;
			},
			// 删除
			delproductListDelete(id) {
				this.$confirm('确定要删除这条记录吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.del.token = this.token;
					this.del.id = id;
					this.del.type = this.UserInfo_data.type;
					this.$api.GetproductListDelete(this.del)
						.then(res => {
							this.$alert('删除成功!', '提示', {
								confirmButtonText: '确定',
								callback: action => {
									if (res.code === 200) {
										this.setproductList();
									}
								}
							});

						})

				}).catch(() => {

				});
			},
			goodsup(id) {

				this.$confirm('是否上架该产品，上架后客户手机端将看到此产品的信息！', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.del.token = this.token;
					this.del.id = id;
					this.del.type = this.UserInfo_data.type;
					this.$api.GetgoodsUp(this.del)
						.then(res => {

							this.$alert('上架成功!', '提示', {
								confirmButtonText: '确定',
								callback: action => {
									if (res.code === 200) {
										this.setproductList();
									}
								}
							});

						})

				}).catch(() => {
					
				});
			},
			// 下架
			goodsDown(id) {
				this.$confirm('是否下架该产品，下架后客户手机端将看到此产品的信息！', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.del.token = this.token;
					this.del.id = id;
					this.del.type = this.UserInfo_data.type;
					this.$api.GetgoodsDown(this.del)
						.then(res => {
							this.$alert('下架成功!', '提示', {
								confirmButtonText: '确定',
								callback: action => {
									if (res.code === 200) {
										this.setproductList();
									}
								}
							});
							
						})

				}).catch(() => {
				});
				// this.$api.GetgoodsDown()	
			},
			productListEdit(id) {
				this.del.token = this.token;
				this.del.id = id;
				this.del.type = this.UserInfo_data.type;
				this.$api.GetproductListEdit(this.del)
					.then(res => {
						if (res.code === 200) {
							this.getedit_productList({})
							this.getedit_productList(res.result)
							if (res.type === 1) {
								this.getSidebarNavIndex("SGgoodsadd-scenic")
								this.$router.push({
									path: '/SGgoodsadd-scenic',
									query: {
										id: id
									}
								})
							}
							if (res.type === 2) {
								this.getSidebarNavIndex("SGgoodsadd-hotel")
								this.$router.push({
									path: '/SGgoodsadd-hotel',
									query: {
										id: id
									}
								})
							}
						}
					})

			}
		},
	}
</script>

<style lang="less">
	.SGgoodsselect {
		width: 100%;
		box-sizing: border-box;

		.main {
			.top {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 15px 0;
				box-sizing: border-box;

				.selop {
					display: flex;
					justify-content: center;
					align-items: center;
					color: #0cf;
					font-size: 16px;
				}
			}

			.bottom {
				width: 100%;

				.goodsellist {
					width: 100%;

					p {
						text-align: left;
					}

					.row {
						width: 100%;

						box-sizing: border-box;
						background-color: #fff;
						box-shadow: 0 0 10px 1px #ccc;
						margin: 15px 0;

						.ul {
							width: 100%;
							display: flex;
							height: 40px;
							align-items: center;

							&:nth-of-type(2) {
								border: 1px solid #ececec;
							}

							.lileft {
								flex: 1;
								min-width: 750px;
								display: flex;

								.li {
									&:first-child {
										width: 200px;
										width: 30%;
									}

									&:nth-of-type(2) {
										width: 160px;
										width: 30%;
									}

									&:nth-of-type(3) {
										width: 40%;
										// flex: 1.5;
									}

									display: flex;
									align-items: center;

									label {
										display: block;
										width: 100px;
										text-align: right;
									}

									span {
										display: block;
										text-align: left;
									}

								}

							}

							.liright {
								cursor: pointer;
								width: 100px;
								display: flex;
								justify-content: center;

								.goodsedit {
									width: 55px;
									height: 30px;
									line-height: 30px;
									font-size: 14px;
									border: 1px solid #47a4e9;
									color: #47a4e9;
								}

								.goodsdel {
									width: 55px;
									height: 30px;
									line-height: 30px;
									font-size: 14px;
									border: 1px solid #d64d54;
									color: #d64d54;

								}

								.goodsDownup {
									width: 55px;
									height: 30px;
									line-height: 30px;
									font-size: 14px;
									border: 1px solid #e9a51c;
									color: #e9a51c;

								}
							}
						}
					}
				}

				.table {
					width: 100%;
					border: 1px solid #8b8b8b;
					margin-top: 10px;

					.table-thead {
						.ul {
							background: #41c7db;
						}
					}

					.ul {
						width: 100%;
						padding: 0 10px;
						box-sizing: border-box;
						line-height: 30px;
						border-bottom: 1px solid #8b8b8b;
						display: flex;

						.li {
							width: 80px;
							padding: 10px 0;
							box-sizing: border-box;
							border-right: 1px solid #8b8b8b;
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							justify-content: center;



							&:nth-of-type(2) {
								width: 150px
							}

							&:nth-of-type(6) {
								width: 150px
							}

							&:last-child {
								width: 110px;
								border-right: 0;
							}

							.el-button {
								margin: 0;
								background: #43c8db;
								width: 70px;
								height: 20px;
								padding: 0;
								border: 1px solid #8b8b8b;
								font-size: 16px;

								&:nth-of-type(1) {
									margin-bottom: 5px;
									color: #fff;
								}

								&:nth-of-type(2) {
									margin-bottom: 5px;
									color: red;
								}

								&:nth-of-type(3) {
									color: #ff6600;
								}
							}
						}

					}
				}
			}
		}


	}
</style>
